<!DOCTYPE html>
<html lang="en">
<head>
  	<title>Gallery</title>
  	<meta charset="utf-8">
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">
	<link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/script.js"></script>
<!--[if lt IE 8]>
   <div style=' clear: both; text-align:center; position: relative;'>
     <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_pro_bannercode">
       <img src="http://storage.ie6countdown.com/assets/100/images/pro_banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
    </a>
  </div>
<![endif]-->
<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css"> 
<![endif]-->
</head>
<body id="propage">
<!-- PRO Framework Panel Begin -->
<div id="advanced"><span class="trigger"><strong></strong><em></em></span><div class="bg_pro"><div class="pro_main"><span class="pro_logo"></span><ul class="pro_menu"><li><a href="index.html"><img src="images/pro_images/pro_home.png" alt=""></a></li><li><a href="404.html">Pages<span></span></a><ul><li><a href="under_construction.html">Under Construction</a></li><li><a href="intro.html">Intro Page</a></li><li><a href="404.html">404 page</a></li></ul></li><li><a href="layouts.html">Layouts</a></li><li><a href="typography.html">Typography</a></li><li class="current"><a href="portfolio.html">Gallery Layouts<span></span></a><ul><li><a href="portfolio.html">Portfolio</a></li><li><span></span><a href="just-slider.html">Sliders</a><ul><li><a href="just-slider.html">Just Slider</a></li><li><a href="kwicks.html">Kwicks Slider</a></li><li><a href="functional-slider.html">Functional Slider</a></li></ul></li><li class="current"><a href="gallery-page1.html">Gallery</a></li></ul></li><li><a href="misc.html">Extras<span></span></a><ul><li><a href="social_media.html">Social and Media<br> Sharing</a></li><li><a href="css3.html">CSS3 Tricks</a></li><li><a href="misc.html">Misc</a></li></ul></li></ul><div class="pro_clear"></div></div></div><div class="bg_pro2"></div></div>
<!-- PRO Framework Panel End -->
<!-- Header -->
<header>
    <div class="main">
        <h1><a href="index.html">Prospect</a></h1>
        <span class="phone">Call Toll-Free:  <span>1-800-559-65-80</span></span>
        <nav>
            <ul class="sf-menu">
                <li><a href="index.html">About us</a><ul>
                        <li><a href="more.html">Who We Are</a></li>
                        <li><a href="more.html">Our Mission</a></li>
                    </ul>
                </li>
                <li><a href="index-1.html">Services</a></li>
                <li><a href="index-2.html">Solutions</a></li>
                <li><a href="index-3.html">Support</a></li>
                <li><a href="index-4.html">partners</a></li>
                <li><a href="index-5.html">Contacts</a></li>
            </ul>
        </nav>
        <div class="clear"></div>
    </div>
</header>
<!-- Content -->
<section id="content">
	<div class="container_24">
		<div class="pro_wrapper">
			<div class="grid_24">
				<h2 class="pro_title3">Gallery</h2>
				<div id="pro_simple_gallery">			  	
					<!-- slider -->
					<div class="pro_gallery_bg">
						<div class="pro_simple_gallery">
							<ul class="pro_items">
								<li><img src="images/stock_images/900x500_2.jpg" alt="" />
								<div class="pro_banner"><span>We work<br>for your profit!</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_3.jpg" alt="" />
								<div class="pro_banner pro_poz-2"><span>Experts<br>in business</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_4.jpg" alt="" />
								<div class="pro_banner"><span>Succeed<br>with us!</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_5.jpg" alt="" />
								<div class="pro_banner pro_poz-2"><span>Broaden your<br>market edge</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_6.jpg" alt="" />
								<div class="pro_banner"><span>We work<br>for your profit!</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_7.jpg" alt="" />
								<div class="pro_banner"><span>Experts<br>in business</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_8.jpg" alt="" />
								<div class="pro_banner pro_poz-2"><span>Succeed<br>with us!</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_1.jpg" alt="" />
								<div class="pro_banner pro_poz-2"><span>Broaden your<br>market edge</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_2.jpg" alt="" />
								<div class="pro_banner"><span>We work<br>for your profit!</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_3.jpg" alt="" />
								<div class="pro_banner pro_poz-2"><span>Experts<br>in business</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_4.jpg" alt="" />
								<div class="pro_banner"><span>Succeed<br>with us!</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_5.jpg" alt="" />
								<div class="pro_banner pro_poz-2"><span>Broaden your<br>market edge</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_6.jpg" alt="" />
								<div class="pro_banner"><span>We work<br>for your profit!</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_7.jpg" alt="" />
								<div class="pro_banner"><span>Experts<br>in business</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_8.jpg" alt="" />
								<div class="pro_banner pro_poz-2"><span>Succeed<br>with us!</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_1.jpg" alt="" />
								<div class="pro_banner pro_poz-2"><span>Broaden your<br>market edge</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_2.jpg" alt="" />
								<div class="pro_banner"><span>We work<br>for your profit!</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_3.jpg" alt="" />
								<div class="pro_banner pro_poz-2"><span>Experts<br>in business</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_4.jpg" alt="" />
								<div class="pro_banner"><span>Succeed<br>with us!</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
								<li><img src="images/stock_images/900x500_5.jpg" alt="" />
								<div class="pro_banner pro_poz-2"><span>Broaden your<br>market edge</span><p>At vero eos et accusamus et iustomes odio dignissimos dumus</p><a href="more.html" class="pro_btn">Read More</a></div></li>
							</ul>
						</div>
					</div>
					<!-- slider end -->	
					<div class="pro_pag">
						<div class="pro_img-pags">
						  <ul>
							<li><a href="#"><span><img src="images/stock_images/70x70_2.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_3.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_4.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_5.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_6.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_7.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_8.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_1.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_2.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_3.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_4.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_5.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_6.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_7.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_8.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_1.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_2.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_3.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_4.jpg" alt="" /></span></a></li>
							<li><a href="#"><span><img src="images/stock_images/70x70_5.jpg" alt="" /></span></a></li>
						  </ul>  
						</div>								
						<a href="#" class="pro_btn pro_prev pro_button3" data-type="prevPage"><span></span></a>
						<a href="#" class="pro_btn pro_next pro_button4" data-type="nextPage"><span></span></a>
					</div>
				</div>
				<dl class="pro_description-box pro_description-box-pad">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
						<p>To make the gallery work <strong>tms-0.4.x.js</strong> and <strong>uCarausel.js</strong> files are used</p>
						<p class="pro_descr_title">The HTML Structure of Gallery</p>
<pre class="pro_htmlCode">&lt;div id="pro_simple_gallery"&gt;			  	
	&lt;div class="pro_gallery_bg"&gt;
		&lt;div class="pro_simple_gallery"&gt;
			&lt;ul class="pro_items"&gt;
				&lt;li&gt;
					&lt;img src="YourImage.jpg" alt="" /&gt;
					&lt;div class="pro_banner"&gt;pro_banner content&lt;/div&gt;
				&lt;/li&gt;
				...
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="pro_pag"&gt;
		&lt;div class="pro_img-pags"&gt;
			&lt;ul&gt;
				&lt;li>&lt;a href="#"&gt;&lt;span&gt;&lt;img src="YourThumbs.jpg" alt="" /&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
				...
			&lt;/ul&gt;
		&lt;/div&gt;
		&lt;a href="#" class="pro_btn pro_prev pro_button3" data-type="prevPage"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
		&lt;a href="#" class="pro_btn pro_next pro_button4" data-type="nextPage"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
						<p>To add new images to the gallery you should have 2 images: 1 for the slider and 1 thumbnail. You need to add these images to different places. The images and thumbnails are connected by the order number. So the first thumbnail in the block <strong>&lt;div class="pro_img-pags"&gt;</strong> will display on click the first image in the  list <strong>&lt;ul class="pro_items"&gt;</strong>.</p>
						 <p>Slider image should be added to the list <strong>&lt;ul class="pro_items"&gt;</strong> using the code:</p>
<pre class="pro_htmlCode">&lt;li&gt;
	&lt;img src="YourImage.jpg" alt="" /&gt;
	&lt;div class="pro_banner"&gt; banner content&lt;/div&gt;
&lt;/li&gt;</pre>
						<p>Thumbnail image should be added to the block <strong>&lt;div class="pro_img-pags"&gt;</strong> using the code:</p>
<pre class="pro_htmlCode">&lt;li>&lt;a href="#"&gt;&lt;span&gt;&lt;img src="YourThumbs.jpg" alt="" /&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</pre>		
<p>You'll get more info on working with Gallery in the template manual after purchase.   Manual  is located in the "documentation" folder of the template package.</p>				
						</div>
					</dd>
				</dl>
			</div>
		</div>
	</div>
</section>
<aside>
    <div class="container_24">
        <div class="wrapper">
            <article class="grid_12">
                <h6>Quick Links</h6>
                <div class="wrapper">
                    <article class="grid_4 alpha">
                        <ul>
                            <li><a href="more.html">About Us</a></li>
                            <li><a href="more.html">Testimonials</a></li>
                            <li><a href="more.html">Our Staff</a></li>
                            <li><a href="more.html">Events &amp; Press</a></li>
                            <li><a href="more.html">Contact Us</a></li>
                        </ul>
                    </article>
                    <article class="grid_4">
                        <ul>
                            <li><a href="more.html">Solutions &amp; Training</a></li>
                            <li><a href="more.html">Affiliate Program</a></li>
                            <li><a href="more.html">Production</a></li>
                            <li><a href="more.html">Risk Management</a></li>
                            <li><a href="more.html">Consultation</a></li>
                        </ul>
                    </article>
                    <article class="grid_4 omega">
                        <ul>
                            <li><a href="more.html">Sign Up</a></li>
                            <li><a href="more.html">Forums</a></li>
                            <li><a href="more.html">Affiliate Program</a></li>
                            <li><a href="more.html">FAQ</a></li>
                        </ul>
                    </article>
                </div>
            </article>
            <article class="grid_11 prefix_1">
                <h6>Contact Information</h6>
                <div class="wrapper">
                    <img class="img-indent-r" src="images/map.png" alt="">
                    <div class="extra-wrap">
                        <p>8901 Marmora Road Glasgow, D04 89GR</p>
                        Phone: +1 800 559 6580<br>
                        E-mail: mail@demolink.org<br>
                        <!--==============================footer=================================-->
                        <footer>
                            &copy; 2012 &nbsp; &nbsp;|&nbsp; &nbsp; <a href="index-6.html">Privacy Policy</a><br>
                        </footer>
                    </div>
                </div>
            </article>
        </div>
    </div>
</aside>
</body>
</html>